import React, { Component } from 'react';

class Small extends Component {
  constructor() {
    super()
    this.state = {
      info: 'hello'
    }
  }
  // 第二个生命周期函数-做用是根据props修改state
  static getDerivedStateFromProps(props, state) {
    console.log('small-第二个生命周期函数');
    console.log(props, state);
    // 如果返回null，就不修改state；如果返回对象，就修改state
    return null
  }
  shouldComponentUpdate(nextProps, nextState) {
    // 组件是否更新-更新的方式：外部props的更新和内部state的变化
    console.log(this.props);
    console.log('--shouldComponentUpdate--',nextProps, nextState);
    // return的值为真就更新，为假就不更新-是否render
    // 可以添加if...else的判断，在某些情况更新，某些情况不更新，达到性能优化的目的
    return true
  }
  changeState() {
    this.setState({
      info: 'react'
    })
  }
  getSnapshotBeforeUpdate(oldProps, oldState) {
    // 在更新前记录数据状态
    console.log('getSnapshotBeforeUpdate:',oldProps, oldState);
    return {
      msg: 'react'
    }
  }
  componentDidUpdate(oldProps, oldState, snapshot) {
    console.log('componentDidUpdate',oldProps, oldState);
    console.log('componentDidUpdate',snapshot);
  }
  // 组件即将销毁
  componentWillUnmount() {
    // 清除定时器、清除监听、清除自己创建的变量等
    console.log('componentWillUnmount');
  }
  render() {
    return (
      <div>
        <p>我是子组件</p>
        <p>props:{this.props.msg}</p>
        <p>state:{this.state.info}</p>
        <button onClick={()=>this.changeState()}>small-修改state</button>
      </div>
    );
  }
}

export default Small;
